<template>
  <div>
    <input
      v-show="false"
      ref="inputRef"
      type="file"
      accept=".xlsx, .xls"
      @change="handleInputClick"
    />
    <div @click="handleUpload">
      <slot></slot>
    </div>
  </div>
</template>
<script setup lang="ts">
import {  ref, unref } from 'vue'
import { readerData } from './ImportExcel'
// import { dateUtil } from '/@/utils/dateUtil'

let props = defineProps<{ dateFormat: String, timeZone: Number }>();
const emit = defineEmits([ 'success', 'error']);

const inputRef = ref<HTMLInputElement | null>(null)
const loadingRef = ref<Boolean>(false)

async function upload(rawFile: File) {
  const inputRefDom = unref(inputRef)
  if (inputRefDom) {
    // fix can't select the same excel
    inputRefDom.value = ''
  }
  await readerData(rawFile, props).then((data)=>{
    success(data);
  }).catch((err)=>{
    
  });
}

/**
 * @description: 触发选择文件管理器
 */
function handleInputClick(e: Event) {
  const files = e && (e.target as HTMLInputElement).files
  const rawFile = files && files[0] // only setting files[0]
  if (!rawFile) return
  upload(rawFile)
}

/**
 * @description: 点击上传按钮
 */
function handleUpload() {
  const inputRefDom = unref(inputRef)
  inputRefDom && inputRefDom.click()
}

function success(data:any){
  emit('success', data)
}


</script>
